<template>
  <div class="incomeTracking">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">预算下达跟踪</div>
      </div>
    </div>
    <div class="content">
      <div class="operation" style="margin-top: 10px;">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域" style="width: 20%;">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="年度" style="width: 18%;">
                    <el-date-picker
                        v-model="form.year"
                        value-format="yyyy"
                        type="year"
                        placeholder="选择年"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item class="btnForm" style="width: 60%;">
                  <div class="clearfix">
                    <div style="margin-right: 10px; float: left; font-size: 12px;
    color: #606266;">
                      <span>跟踪维度</span>
                      <el-radio-group
                            v-model="form.radio"
                            @change="checedRadio"
                            style="font-size: 12px;"
                        >
                            <el-radio :label="1">全部明细</el-radio>
                            <el-radio :label="2">只看进度</el-radio>
                        </el-radio-group>
                    </div>
                    <el-button
                        size="mini"
                        type="primary"
                        @click="getData()"
                        >查询</el-button
                    >
                    <el-button
                        size="mini"
                        type="orange"
                        @click="handle_second"
                        >二级导出</el-button
                    >
                    <el-button
                        size="mini"
                        type="orange"
                        class="export"
                        @click="handle_thirdly"
                        >三级导出</el-button
                    >
                    <el-button
                        size="mini"
                        type="orange"
                        class="export"
                        @click="handle_fourth"
                        >四级导出</el-button
                    >
                  </div>
                    
                </el-form-item>
            </el-form>
        </div>

        <div  class="tableBox" style="margin-top: 15px">
          <el-table
              v-if="form.radio == 1"
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
                    ref="tableData"
                    :max-height="height + 'px'"
                >
                <el-table-column fixed min-width="120" prop="indexName" label="指标名称"></el-table-column>
                <el-table-column fixed min-width="120" prop="indexType" label="指标类型"></el-table-column>
                <el-table-column fixed min-width="100" prop="areaName" label="区域名称"></el-table-column>
                <el-table-column label="年度完成">
                   <el-table-column min-width="120" prop="target1" label="目标值"></el-table-column>
                   <el-table-column min-width="120" prop="complete1" label="实际完成"></el-table-column>
                   <el-table-column min-width="120" prop="schedule1" label="完成进度(%)"></el-table-column>
                </el-table-column>
                <el-table-column label="一季度">
                   <el-table-column min-width="120" prop="seasonTarget1" label="目标值"></el-table-column>
                   <el-table-column min-width="120" prop="seasonComplete1" label="实际完成"></el-table-column>
                   <el-table-column min-width="120" prop="seasonSchedule1" label="完成进度(%)"></el-table-column>
                </el-table-column>
                <el-table-column label="二季度">
                   <el-table-column min-width="120" prop="seasonTarget2" label="目标值"></el-table-column>
                   <el-table-column min-width="120" prop="seasonComplete2" label="实际完成"></el-table-column>
                   <el-table-column min-width="120" prop="seasonSchedule2" label="完成进度(%)"></el-table-column>
                </el-table-column>
                <el-table-column label="三季度">
                   <el-table-column min-width="120" prop="seasonTarget3" label="目标值"></el-table-column>
                   <el-table-column min-width="120" prop="seasonComplete3" label="实际完成"></el-table-column>
                   <el-table-column min-width="120" prop="seasonSchedule3" label="完成进度(%)"></el-table-column>
                </el-table-column>
                <el-table-column label="四季度">
                   <el-table-column min-width="120" prop="seasonTarget4" label="目标值"></el-table-column>
                   <el-table-column min-width="120" prop="seasonComplete4" label="实际完成"></el-table-column>
                   <el-table-column min-width="120" prop="seasonSchedule4" label="完成进度(%)"></el-table-column>
                </el-table-column>
                <el-table-column v-for="(it, i) in title" :key="'title' + i" :label="it.label">
                   <el-table-column min-width="120" :prop="it.it.value1" label="目标值"></el-table-column>
                   <el-table-column min-width="120" :prop="it.it.value2" label="实际完成"></el-table-column>
                   <el-table-column min-width="120" :prop="it.it.value3" label="完成进度(%)"></el-table-column>
                </el-table-column>
                <el-table-column label="年累计">
                   <el-table-column min-width="120" prop="target14" label="目标值"></el-table-column>
                   <el-table-column min-width="120" prop="complete14" label="实际完成"></el-table-column>
                   <el-table-column min-width="120" prop="schedule14" label="完成进度(%)"></el-table-column>
                </el-table-column>
          </el-table>
          <el-table
                v-if="form.radio == 2"
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
                    ref="tableData"
                    :max-height="height + 'px'"
                >
                <el-table-column fixed min-width="120" prop="indexName" label="指标名称"></el-table-column>
                <el-table-column fixed min-width="120" prop="indexType" label="指标类型"></el-table-column>
                <el-table-column fixed min-width="100" prop="areaName" label="区域名称"></el-table-column>
                <el-table-column min-width="120" label="完成进度">
                    <el-table-column min-width="120" prop="schedule1" label="年度完成"></el-table-column>
                    <el-table-column min-width="120" prop="seasonSchedule1" label="一季度"></el-table-column>
                    <el-table-column min-width="120" prop="seasonSchedule2" label="二季度"></el-table-column>
                    <el-table-column min-width="120" prop="seasonSchedule3" label="三季度"></el-table-column>
                    <el-table-column min-width="120" prop="seasonSchedule4" label="四季度"></el-table-column>
                    <el-table-column v-for="(it, i) in title" min-width="120" :key=" 'process' + i" :prop="it.it.value3" :label="it.label"></el-table-column>
                    <el-table-column min-width="120" prop="schedule14" label="年累计"></el-table-column>
                </el-table-column>
          </el-table>
          <div class="page">
                <el-pagination
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[10, 20, 50]"
                    @size-change="sizeChange"
                    :page-size="pageSize"
                    :total="dataTotal"
                    :current-page.sync="currentPage"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
      
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="分公司月度预算" name="first">
          <tab1 ref="tab1"   v-if="isFirst" />
        </el-tab-pane>
        <el-tab-pane label="用户发展预算" name="second" lazy>
          <tab2 ref="tab2"  v-if="isSecond"/>
        </el-tab-pane>
        <el-tab-pane label="分项业务收入" name="third" lazy>
          <tab3 ref="tab3" v-if="isThird"/>
        </el-tab-pane>
      </el-tabs> -->
    </div>
  </div>
</template>

<script>
import tab1 from "@/views/budget/tracking/budgetReleaseTracking/budgetReleaseTracking_tab1";
import tab2 from "@/views/budget/tracking/budgetReleaseTracking/budgetReleaseTracking_tab2";
import tab3 from "@/views/budget/tracking/budgetReleaseTracking/budgetReleaseTracking_tab3";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api"
import { getCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI";
export default {
  name: "incomeTracking",
  components: {
    tab1,
    tab2,
    tab3,
  },
  data() {
    return {
      form: {
          areaId: '',
          year: '',
          radio: 1,
      },
      tableLoading: !1,
      tableData: [],
      activeName: "first",
      isFirst:true,
      isSecond:false,
      isThird:false,
      title: Array.from(new Array(12), (item, value) =>
                 item = {
                          label: value + 1 + "月",
                          it: {
                            value1: 'target' + (value + 2),
                            value2: 'complete' + (value + 2),
                            value3: 'schedule' + (value + 2),
                          }
                      }
            ),
      height: window.innerHeight - 200,
      page: 1,
      pageSize: 10,
      currentPage: 1,
      dataTotal: 0,
      totalNum: '',
    };
  },
  created() {
        window.addEventListener('resize', this.getHeight);
  },
  destroyed() {
      window.removeEventListener('resize', this.getHeight);
  },
  mounted(){
    var that = this;
    // this.$refs.tab1.init();
    that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    that.form.areaId = that.accountInfo.areaId;
    that.form.year = that.moment().format("YYYY");
    that.getData();
  },
  methods: {
    handleClick(tab,event){
      if(tab.name == "first"){
        this.isFirst = true;
        this.isSecond = false;
        this.isThird = false;
        // this.$refs.tab1.init();
      }
      if(tab.name == "second"){
        this.isSecond = true;
        this.isFirst = false;
        this.isThird = false;
        // this.$refs.tab2.init();
      }
      if(tab.name == "third"){
        this.isThird = true;
        this.isFirst = false;
        this.isSecond = false;
        // this.$refs.tab3.init();
      }
    },
    getData() {
      var that = this;

        that.tableLoading = !0;
        $budgetAPI.getYUSUANData({areaId: that.form.areaId, testYear: that.form.year, pageNum: that.currentPage, pageSize: that.pageSize }, res => {
          console.log(res)
          that.tableLoading = false
          that.tableData = res.content.data
          that.dataTotal = +res.content.total
        })
    },
    handle_second() {
          let areaId = this.form.areaId,
            year = this.form.year,
            url = '/api/releaseTrack/exportNewTwoReleaseTrackData',
            isShowDetail = this.form.radio == '1' ? !0 : !1,
            token = getCookie("token");

            window.location.href =
                prefixAPI.hp + url + 
                "?areaId=" +
                areaId +
                "&testYear=" +
                year +
                '&isShowDetail=' + isShowDetail +
                "&token=" +
                token;
    },
    handle_thirdly() {
          let areaId = this.form.areaId,
            year = this.form.year,
            url = '/api/releaseTrack/exportNewThreeReleaseTrackData',
            isShowDetail = this.form.radio == '1' ? !0 : !1,
            token = getCookie("token");

            window.location.href =
                prefixAPI.hp + url + 
                "?areaId=" +
                areaId +
                "&testYear=" +
                year +
                '&isShowDetail=' + isShowDetail +
                "&token=" +
                token;
    },
    handle_fourth() {
          let areaId = this.form.areaId,
            year = this.form.year,
            url = '/api/releaseTrack/exportNewFourReleaseTrackData',
            isShowDetail = this.form.radio == '1' ? !0 : !1,
            token = getCookie("token");

            window.location.href =
                prefixAPI.hp + url + 
                "?areaId=" +
                areaId +
                "&testYear=" +
                year + 
                '&isShowDetail=' + isShowDetail +
                "&token=" +
                token;
    },
    checedRadio(val) {
        this.form.radio = val;
    },
    getHeight() {
        this.height = window.innerHeight - 200;
    },
    //页码改变
    sizeChange(val) {
        this.pageSize = val;
        this.currentPage = 1;
        this.getData();
    },
      //翻页操作
    handleCurrentChange(page) {
        this.currentPage = page;
        this.getData();
    },
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
    display: flex ;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    padding: 15px 0;
    .totalNum {
        color: #999;
    }
}
</style>
